<template>
	<div class="content">
		<div class="form-group">
			<h3>体育馆管理系统</h3>
			<el-form ref="form" :model="form" label-width="80px">
			  <el-form-item label="用户名">
			    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
			  </el-form-item>
			  <el-form-item label="密码">
			    <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">登录</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
	
</template>

<script>
import axios from "axios"
export default {
  
  name: 'HomeView',
  data(){
	  return{
		  form:{
			  username:'',
			  password:''
		  }
	  }
  },
  methods:{
	  onSubmit(){
		  const params = new URLSearchParams()
		  params.append('username',this.form.username)
		  params.append('password',this.form.password)
		  axios({
			  url:'/api/gymlogin',
			  method:'post',
			  data:params
		  }).then(res=>{
			  if (res.data && res.data.code === 0) {
			    this.$router.replace({ name: 'home' })
			  } 
		  }).catch(e=>{
			  console.log(e)
		  })
	  }
  }
}
</script>

<style>
	.content{
		height: 100vh;
		width: 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(../assets/bg.jpg) fixed;
		background-size: cover;
	}
	.content .form-group{
		width: 500px;
		background-color: rgba(255, 255, 255, .4);
		padding: 30px;
		border-radius: 15px;
	}
</style>